<template>
  <div>
    <!-- slot插槽  是子组件给父组件 预留的 自定义内容的 替代组件 -->
    <h1>父组件</h1>
    <hr>
    <my-zi>
      <!--使用template包裹 你想给插槽传递的内容 默认插槽  
      slot-scope="scope" 2.6以下版本的
        作用插槽的数据接收写法
      #default="scope" 2.6以上的版本
  -->
        <template slot-scope="scope">
          <div>
             <h1 style="color:red;">传递的内容--{{scope.num}}</h1>
            <h1 style="color:red;">内容2</h1>
            <h1 @click="say" style="color:red;">{{fdata}}</h1>
          </div>
        </template>
       <!-- 给具名插槽传递内容
        v-slot:名字 
        v-slot:插槽名 的简写 #插槽名
         -->
         <template v-slot:footer>
          <div>
              <h1 style="color:blue;">我是脚步插槽需要的内容</h1>
          </div>
        </template>
        
        <template #header>
          <div>
              <h1 style="color:green;">我是头部插槽需要的内容</h1>
          </div>
        </template>
        <!-- 调用作用域插槽
        #myslot="scope" 
        scope.属性 --子组件传来的数据
        -->
        <template #mydes="scope">
          <div>
            <hr>
             <h1>作用域插槽的内容</h1>
             <h1>{{scope.item.name}}</h1>
              <h1>{{scope.item.age}}</h1>
              <h1>{{scope.item.sex}}</h1>
            <hr>
          </div>
        </template>
        <!-- 调用作用域插槽 -->
        <!-- 
          #default="scope" 
          默认形式的 作用插槽
         -->
        <template #myprice="scope"> 
          <div>
            <h1 v-for="item in scope.myitem">{{item}}</h1>
            <h1>价格：{{scope.myprice}}</h1>
          </div>
        </template>
    </my-zi>
  </div>
</template>

<script>
import myZi from './myZI.vue'
export default {
  name: '2209vueIndex',
  components:{
    myZi
  },
  data() {
    return {
      fdata:"父组件的数据"
    };
  },

  mounted() {
    
  },

  methods: {
    say(){
      alert(1)
    }
  },
};
</script>